<template>
  <view>
    <view class="userinfo-box">
      <view class="userinfo-avatar">
        <image class="image" :src="userInfo.avatar" mode="aspectFit" />
      </view>
      <view class="text-xl">{{ userInfo.nickname }}</view>
      <image class="gif-wave" src="https://cdn.cuuo.cn/images/wave.gif" mode="scaleToFill" />
    </view>
    <view class="about-shadow tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
      <view class="tn-flex tn-flex-row-around tn-radius tn-padding-top">
        <view class="tn-padding-sm tn-margin-xs tn-radius" @click="click(`/user/personal/personal?id=${userInfo.id}`)">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-cyan">
              <view class="tn-icon-my" style="color: #080808;"></view>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">个人资料</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm tn-margin-xs tn-radius" @click="click(`/user/personal/index?id=${userInfo.id}`)">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-orange">
              <view class="tn-icon-moments" style="color: #080808;"></view>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">我的动态</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm tn-margin-xs tn-radius" @click="click('/pages/auth/auth')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue">
              <view class="tn-icon-education" style="color: #080808;"></view>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">学生认证</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="about__wrap">
      <view class="about-shadow tn-margin-top-sm">
        <tn-list-cell :hover="true" :arrow="true" :radius="true" :fontSize="30">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
              <view class="tn-icon-service tn-color-blue"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm">联系我们</view>
            </view>
          </button>
        </tn-list-cell>
        <tn-list-cell :hover="true" :arrow="true" :radius="true" :fontSize="30">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
              <view class="tn-icon-computer-fill tn-color-orangered"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm">问题反馈</view>
            </view>
          </button>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :arrow="true" :radius="true" :fontSize="30" @click="click('/user/help/help')">
          <view class="tn-flex tn-flex-col-center">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
              <view class="tn-icon-help tn-color-orange"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1">帮助中心</view>
          </view>
        </tn-list-cell>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "user",
  props: {
  },
  data() {
    return {
    }
  },
  methods: {
    click(e) {
      if (!this.isLogin) {
        return uni.navigateTo({
          url: '/pages/login/login',
        });
      }
      uni.navigateTo({
        url: e,
      });
    },
  },
  watch: {},
  // 创建组件
  created() {
  },
  // 组件周期函数--监听组件挂载完毕
  mounted() { },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() { },
  // 组件周期函数--监听组件数据更新之后
  updated() { },
  // 组件周期函数--监听组件激活(显示)
  activated() {
    console.log(1)
  },
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() { },
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() { },
} 
</script>

<style lang="scss" scoped>
.userinfo-box {
  background-image: url('https://cdn.cuuo.cn/images/user-bg.png');
  background-size: cover;
  height: 500rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

  .userinfo-avatar {
    overflow: hidden;
    display: block;
    width: 140rpx;
    height: 140rpx;
    margin: 20rpx;
    margin-top: 50rpx;
    border-radius: 50%;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);

    .image {
      width: 140rpx;
      height: 140rpx;
    }
  }

  .gif-wave {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 99;
    mix-blend-mode: screen;
    height: 150rpx;
  }
}

.about-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

.about {

  &__wrap {
    position: relative;
    z-index: 1;
    margin: 20rpx 0;
  }
}

.icon {
  &__item {
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 15rpx;
      height: 15rpx;
      font-size: 50rpx;
      border-radius: 50%;
      margin-bottom: 38rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;

      }
    }
  }
}
</style>